<div class="container-fluid">
    <h4>联系人列表</h4>
    <div class="table-wrapper users-table section">
        <div class="input-group" id="search">
            <label for="mobile">手机号：</label>
            <input type="text" name="mobile" class="input-small" id="mobile">
            <span>
           <button id="search_btn" type="button" class="btn btn-purple btn-sm">
               搜索
               <i class="icon-search icon-on-right bigger-110"/>
           </button>
       </span>
        </div>
        <div id="list"></div>
    </div>
</div>

<script>
    var url = 'contact/list-data.do';
    var $datagrid = $('#list');

    loadData();

    $('#search_btn').on('click', function () {
        loadData();
    });

    function loadData() {
        $datagrid.datagrid({
            action: true,
            doUpdate: function (rowData) {
                doUpdate(rowData.id);
            },
            doDel: function (rowData) {
                doDelete(rowData.id)
            },
            toolbar: [
                {
                    type: 'ADD',
                    click: function () {
                        add();
                    }
                }
            ],
            'dataModel': {
                'url': url,
                'parameters': getCommJosnParams('search')
            },
            'columns': [
                {title: '姓名', dataField: 'username'},
                {title: '电话', dataField: 'mobile'},
                {title: '备注', dataField: 'remark'},
                {title: '排序', dataField: 'sort'},
                {title: '创建时间', dataField: 'createTime'}
            ]
        });
    };

    $('.date-picker').datepicker({
        language: 'zh-CN',
        autoclose: true,
        format: 'yyyy-mm-dd'
    }).next().on(ace.click_event, function () {
        $(this).prev().focus();
    })

    function doDelete(id) {
        layer.confirm("确定删除此联系人", function () {
            $.post('contact/delete.do', {"id": id}, function (result) {
                if (result.success) {
                    loadData();
                    layer.alert("删除成功", {icon: 1});
                    layer.closeAll();
                } else {
                    layer.alert("删除失败", {icon: 5});
                }
            }, "json");
        })
    }


    function doUpdate(id) {
        var $div = $('<div>');
        $div.load('contact/form.do?id=' + id, function (response, status, xhr) {
            if (xhr.status == 200) {
                layer.open({
                    type: 1,//Page层类型
                    area: ['300px', '260px'],
                    title: '修改联系人信息',
                    btn: ['提交修改'],
                    content: $div.html(),
                    yes: function (layId) {
                        var param = $('#contactUpdateForm').serialize();
                        $.post('contact/update.do', param, function (result) {
                            if (result.success) {
                                loadData();
                                layer.msg('修改成功', {icon: 1});
                                layer.close(layId)
                            } else {
                                layer.msg('修改失败', {icon: 5});
                            }
                        }, 'json')
                    }
                });
            }
        });
    }

    function add() {
        var $div = $('<div>');
        $div.load('/contact/form.do', function (response, status, xhr) {
            if (xhr.status == 200) {
                layer.open({
                    type: 1,//Page层类型
                    area: ['300px', '260px'],
                    title: '新增联系人',
                    btn: ['提交'],
                    content: $div.html(),
                    yes: function (layId) {
                        var param = $('#contactAddForm').serialize();
                        $.post('contact/add.do', param, function (result) {
                            if (result.success) {
                                loadData();
                                layer.msg('新增成功', {icon: 1});
                                layer.close(layId)
                            } else {
                                layer.msg('新增失败', {icon: 5});
                            }
                        }, 'json')
                    }
                });
            }
        });
    }

</script>
